<template>
  <div class="containder">
    <!--头部-->
    <YanXuanHeader></YanXuanHeader>
    <!--列表区-->
    <div class="userWrap">
      <ul class="list">
        <li><span>手机</span>
          <div><i>{{useStore.phone}}换绑</i><img class="arrow" src="@/views/Unav/images/右箭头.png" /></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import YanXuanHeader from '@/components/YanXuanHeader/index.vue'
import { useUserStore } from '@/stores/user';
const useStore = useUserStore()
</script>

<style scoped>
/*背景样式*/
.containder {
  background-color: #eee;
}

/**列表的样式 */
.userWrap {
  margin-top: .5333rem;
}

.list li {
  background-color: #fff;
  height: 1.3867rem;
  display: flex;
  justify-content: space-between;
  padding: 0rem .1333rem 0rem .4rem;
  border-bottom: 1px solid #d9d9d9;
}

.list li div {
  display: flex;
  align-items: center;
}

.list li span,
i {
  color: #333;
  font-size: .3467rem;
  line-height: 1.3867rem;
  font-style: normal;
}

/**头像样式 */
.avatar {
  width: .7467rem;
  height: .7467rem;
  border-radius: 50%;
  margin: .32rem 0rem;
}

/**箭头的样式 */
.arrow {
  width: .6667rem;
  height: .6667rem;
}

/**二维码样式 */
.erweima {
  display: inline-block;
  width: .5333rem;
  height: .5333rem;
  background: url(@/views/Unav/images/erweima.png) no-repeat;
  background-size: 3.4rem 2.8rem;
}
</style>